<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-cell
					title="出生日期"
					:desc="date1 ? date1 : '请选择'"
					showArrow
					@onClick="show1 = true"
				></pure-cell>
				<pure-date-picker
					:show="show1"
					:date="date1"
					@onOk="onOk1"
					@onNot="show1 = false"
					@onClose="show1 = false"
				></pure-date-picker>
			</pj-demo>

			<!-- 两列 -->
			<pj-demo title="两列">
				<pure-cell
					title="出生日期"
					:desc="date2 ? date2 : '请选择'"
					showArrow
					@onClick="show2 = true"
				></pure-cell>
				<pure-date-picker
					:show="show2"
					:date="date2"
					:cols="2"
					@onOk="onOk2"
					@onNot="show2 = false"
					@onClose="show2 = false"
				></pure-date-picker>
			</pj-demo>

			<!-- 一列 -->
			<pj-demo title="一列">
				<pure-cell
					title="出生日期"
					:desc="date3 ? date3 : '请选择'"
					showArrow
					@onClick="show3 = true"
				></pure-cell>
				<pure-date-picker
					:show="show3"
					:date="date3"
					:cols="1"
					@onOk="onOk3"
					@onNot="show3 = false"
					@onClose="show3 = false"
				></pure-date-picker>
			</pj-demo>

			<!-- 格式化显示文本 -->
			<pj-demo title="格式化显示文本">
				<pure-cell
					title="出生日期"
					:desc="date4 ? date4 : '请选择'"
					showArrow
					@onClick="show4 = true"
				></pure-cell>
				<pure-date-picker
					:show="show4"
					:date="date4"
					:formatter="formatter"
					@onOk="onOk4"
					@onNot="show4 = false"
					@onClose="show4 = false"
				></pure-date-picker>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const show1 = ref(false);
	const show2 = ref(false);
	const show3 = ref(false);
	const show4 = ref(false);
	const date1 = ref("2026-11-22");
	const date2 = ref("2026-11");
	const date3 = ref("2026");
	const date4 = ref("2026-11-22");

	// 选择事件
	function onOk1(dateStr, items) {
		console.log("onOk1", dateStr, items);
		date1.value = dateStr;
		show1.value = false;
	}

	// 选择事件
	function onOk2(dateStr, items) {
		console.log("onOk2", dateStr, items);
		date2.value = dateStr;
		show2.value = false;
	}

	// 选择事件
	function onOk3(dateStr, items) {
		console.log("onOk3", dateStr, items);
		date3.value = dateStr;
		show3.value = false;
	}

	// 选择事件
	function onOk4(dateStr, items) {
		console.log("onOk4", dateStr, items);
		date4.value = dateStr;
		show4.value = false;
	}

	// 格式化显示文本
	function formatter(num, type) {
		if (type === "year") {
			return `${num}--年`;
		}
		if (type === "month") {
			return `${num}--月`;
		}
		if (type === "day") {
			return `${num}--日`;
		}
		return num;
	}
</script>

<style lang="scss" scoped></style>
